<template>
  <div>
    <el-card style="width: 1200px; margin: 0 auto" shadow="always">
      <el-button
        style="margin-left: 20px"
        type="primary"
        icon="el-icon-plus"
        size="small"
        @click="goAddPage"
        :disabled="Category3Id ? false : true"
        >添加SPU</el-button
      >

      <el-table :data="SpuList" border style="width: 100%; margin: 20px">
        <el-table-column type="index" label="序号" width="200">
        </el-table-column>
        <el-table-column prop="spuName" label="SPU名称" width="200">
        </el-table-column>
        <el-table-column prop="description" label="SPU描述" width="500">
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <el-button
              @click="AddSKU(row)"
              size="small"
              type="primary"
              icon="el-icon-plus"
              v-permission="'btn.Spu.add'"
            />
            <el-button
              @click="EditSpu(row)"
              size="small"
              type="warning"
              icon="el-icon-edit"
            />
            <el-button
              @click="InfoSpu(row)"
              size="small"
              type="info"
              icon="el-icon-info"
            />
            <el-button
              @click="DelSpu(row)"
              size="small"
              type="danger"
              icon="el-icon-delete-solid"
              v-permission="'btn.Spu.delete'"
            />
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[3, 5, 7, 9]"
        :page-size="pageSize"
        layout=" prev, pager, next, jumper,->,total, sizes"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { deleteSpuInfoApi, getSpuListApi } from '@/api/SPUApi'
import { mapState } from 'vuex'
export default {
  name: 'SpuList',
  data() {
    return {
      SpuList: [],
      currentPage: 1,
      pageSize: 3,
      total: 0
    }
  },
  computed: {
    ...mapState('sortStore', ['Category3Id'])
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
      this.getSpuList(this.Category3Id)
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getSpuList(this.Category3Id)
    },
    async getSpuList(val) {
      const res = await getSpuListApi(this.currentPage, this.pageSize, val)
      if (res.code === 200) {
        this.SpuList = res.data.records
        this.total = res.data.total
      }
    },
    goAddPage() {
      this.$emit('SwitchAddorUpdate', '2')
    },
    AddSKU(row) {
      this.$store.dispatch('spuStore/addSkuList', row.id)
      this.goAddSkuPage()
    },
    goAddSkuPage() {
      this.$emit('SwitchAddorUpdate', '3')
    },
    async EditSpu(row) {
      await this.$store.dispatch('spuStore/updateBaseState', {
        category3Id: row.category3Id,
        description: row.description,
        id: row.id,
        tmId: row.tmId,
        spuName: row.spuName
      })
      this.goAddPage()
    },
    InfoSpu() {},
    async DelSpu(row) {
      const res = await deleteSpuInfoApi(row.id)
      if (res.code === 200) {
        this.$message.success('删除成功')
        this.getSpuList(this.Category3Id)
      }
    }
  },
  watch: {
    Category3Id: {
      handler(newValue) {
        if (!this.Category3Id) return
        this.getSpuList(newValue)
      },
      immediate: true
    }
  }
}
</script>

<style lang="less" scoped></style>
